const settingSafe = {
  template: `
    <div class="yui3-u-5-6">
      <div class="body userSafe">
        <ul class="sui-nav nav-tabs nav-large nav-primary ">
          <li class="active"><a href="#one" data-toggle="tab">密码设置</a></li>
          <li><a href="#two" data-toggle="tab">绑定手机</a></li>
        </ul>
        <div class="tab-content ">
          <div id="one" class="tab-pane active">
            <form class="sui-form form-horizontal sui-validate" id="jsForm" novalidate="novalidate">
              <div class="control-group">
                <label for="inputusername" class="control-label">用户名：</label>
                <div class="controls">
                  <input id="pwdid" class="fn-tinput" data-rule-remote="http://www.baidu.com" type="password" name="OldPassword" placeholder="输入昵称" required="" data-msg-required="请输入昵称" minlength="6" data-msg-minlength="至少输入6个字符" autocomplete="off" style="background-image: url(&quot;&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">

                </div>
              </div>
              <div class="control-group">
                <label for="inputPassword" class="control-label">密码：</label>
                <div class="controls">
                  <input class="fn-tinput" type="password" name="password" value="" placeholder="新密码" required="" id="password" data-rule-remote="php.php" style="background-image: url(&quot;&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
                </div>
              </div>
              <div class="control-group">
                <label for="inputRepassword" class="control-label">重复密码：</label>
                <div class="controls">
                  <input class="fn-tinput" type="password" name="confirm_password" value="" placeholder="确认新密码" required="" equalto="#password" style="background-image: url(&quot;&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label"></label>
                <div class="controls">
                  <button type="submit" class="sui-btn btn-primary">提交按钮</button>
                </div>
              </div>
            </form>
          </div>
          <div id="two" class="tab-pane">
            <!--步骤条-->
            <div class="sui-steps steps-auto">
              <div class="wrap">
                <div class="finished">
                  <label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 验证身份</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
                </div>
              </div>
              <div class="wrap">
                <div :class="step > 1 ? 'finished' : 'todo'">
                  <label><span class="round">2</span><span>第二步 绑定新手机号</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
                </div>
              </div>
              <div class="wrap">
                <div :class="step > 2 ? 'finished' : 'todo'" >
                  <label><span class="round">3</span><span>第三步 完成</span></label>
                </div>
              </div>
            </div>

            <!--表单1 验证旧手机 -->
            <form v-show="step===1" class="sui-form form-horizontal sui-validate" data-toggle="validate" id="bind-form" novalidate="novalidate">

              <div class="control-group">
                <label for="inputPassword" class="control-label">验证方式：</label>
                <div class="controls fixed">手机验证（138****9856）</div>
              </div>
              <div class="control-group">
                <label for="inputcode" class="control-label">验证码：</label>
                <div class="controls">
                  <input name="inputcode" type="text" id="inputcode">
                </div>
                <div class="controls">
                  验证码
                </div>
              </div>
              <div class="control-group">
                <label for="inputRepassword" class="control-label">短信验证码：</label>
                <div class="controls">
                  <input name="msgcode" type="text" id="msgcode">
                </div>
                <div class="controls">
                  <button class="sui-btn btn-info">发送</button>
                </div>
              </div>
              <div class="control-group next-btn">
                <a class="sui-btn btn-primary" href="javascript:void(0)" @click="step++">下一步</a>
              </div>
            </form>
            <!--表单2 验证新手机-->
            <form v-show="step===2" class="sui-form form-horizontal sui-validate" data-toggle='validate' id="phone-form">

              <div class="control-group">
                <label for="inputPassword" class="control-label">手机号：</label>
                <div class="controls">
                  <input name="inputphone" type="text" id="inputphone" placeholder="请输入新手机号">
                </div>
              </div>
              <div class="control-group">
                <label for="inputcode" class="control-label">验证码：</label>
                <div class="controls">
                  <input name="inputcode" type="text" id="inputcode">
                </div>
                <div class="controls">
                  验证码
                </div>
              </div>
              <div class="control-group">
                <label for="inputRepassword" class="control-label">短信验证码：</label>
                <div class="controls">
                  <input name="msgcode" type="text" id="msgcode">
                </div>
                <div class="controls">
                  <button class="sui-btn btn-info">发送</button>
                </div>
              </div>

              <div class="control-group next-btn">
                <a class="sui-btn btn-primary" href="javascript:void(0)" @click="step--">上一步</a>&nbsp;
                <a class="sui-btn btn-primary" type="submit" href="javascript:void(0)" @click="step++">下一步</a>
              </div>
            </form>
            <!--表单3 验证成功-->
            <div v-show="step===3" class="overed">
              <div class="content">
                <div class="img">
                  <img src="img/_/right.png" alt="">
                </div>
                <div class="text">
                  <p class="success">恭喜你，新手机绑定成功！</p>
                  <p class="back"><a href="/">返回首页</a></p>
                </div>
              </div>


            </div>
          </div>
        </div>

      </div>
    </div>
  `,
  data(){
    return {
      step: 1,
    }
  },
  methods:{}
}

Vue.component("settingSafe", settingSafe);